<template>
  <el-card class="me-area" :body-style="{ padding: '16px' }">
    <div class="block">
      <el-avatar :size="100"  :src="touUrl"></el-avatar>
    </div>
      <div class="value">
        <div class="me-article-author"><p>{{ userName }}</p></div>
        <span class="me-pull-right me-article-count">
        <i class="el-icon-view"></i>&nbsp;
        {{ hotness }}
      </span>
    <div class="me-article-header">
      <router-link :to="`/detail/${id}`" class="me-article-title">
        <p>订单标题：{{ orderTitle }}</p>
      </router-link>
    </div>
    <div class="me-artile-description">
      <h4>备注：</h4>
      <div class="text">
        <span style="margin-left: 5px;">{{ remarks }}</span>
      </div>
    </div>
    <div class="me-article-footer">
      <el-tag v-for="t in lableList" :key="t.id" size="mini" type="success">{{ t.content }}</el-tag>

      <span class="me-pull-right me-article-count" style="color: black">
        <i class="el-icon-time"></i>&nbsp;预计开始时间：{{startTime}}-
         <i class="el-icon-time"></i>&nbsp;预计结束时间：{{endTime}}
      </span>

    </div>
      </div>
  </el-card>
</template>

<script>

  export default {
    name: 'OrderItem',
    props: {
      id: String,
      endTime: String,
      modificationTime: String,
      hotness: Number,
      orderTitle: String,
      remarks:String,
      startTime: String,
      status: Number,
      userId: String,
      creationTime: String,
      userName: String,
      touUrl: String,
      lableList: []
    },
    data() {
      return {}
    },
    methods: {
      view(id) {
        this.$router.push({path: `/view/${id}`})
      }
    }
  }
</script>

<style scoped>
  .me-area{
    background-color: #fadadd;
    margin-top: 20px;
    border-radius: 20px;
  }
   .block{
       float: left;
   }
   .value{
       float: left;
       width: 85%;
     height: 150px;
       margin-left: 10px;
   }
  .me-article-author{
     margin-top: 5px;
    margin-left: 5px;
   }
  .me-article-author p{
    color: black;
    font-size:150%;
  }

  .me-article-header {
    /*padding: 10px 18px;*/
    margin-left: 5px;

    padding-top: 7px;
      /*margin-left: 20px;*/
  }

  .me-article-title {
    font-size: 120%;
    /*font-weight: 600;*/
  }

  .me-article-icon {
    padding: 3px 8px;
  }

  .me-article-count {
    color: #a6a6a6;
    padding-left: 14px;
    font-size: 13px;
  }

  .me-pull-right {
    float: right;
  }

  .me-artile-description {
    font-size: 13px;
    line-height: 20px;
    margin-top: 5px;
    margin-left: 5px;
  }
  .me-artile-description h4{
    float: left;
    width: 40px;
  }
  .me-artile-description .text{
    border-radius: 11px;
    float: right;
    margin-right: 5.7%;
    width: 90%;
    height: 55px;
    background-color: #FFF5F5;
  }
  .me-article-author {
    color: #a6a6a6;
    padding-right: 18px;
    font-size: 13px;
  }
  .me-article-footer{
    clear: right;
    padding-top: 5px;
  }
  .me-article-footer .el-tag:not(:first-child){
    margin-left: 30px;
  }

</style>
